<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>个人信息设置</title>
	<link rel="stylesheet" href="../../css/mui.min.css">
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/vue.min.js"></script>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		body {
			background: #fff;
		}

		ul li {
			list-style: none;
		}

		.container_box {
			padding-top: 40px;
		}

		#header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			box-shadow: none;
			border: none;
		}

		.mui-icon-left-nav {
			color: #60C68B;
		}

		#header span {
			color: #60C68B;
			font-size: 14px;
		}

		.left_span img {
			width: 40%;
		}

		.right_span {
			font-size: 16px;
			color: #60C68B;
		}

		.head_top {
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: relative;
		}
		.head_top input{position: absolute;top: 0;left: 0;width: 100px;height: 100px;opacity: 0;}
		.head_top .img_box {
			width: 60px;
			height: 60px;
			overflow: hidden;
			margin-right: 14px;
			border-radius: 50%;
		}

		.head_top .img_box img {
			width: 100%;height: 100%;
		}

		.head_top h2 {
			color: #999;
			font-size: 14px;
		}

		.list_box {
			padding: 10px;
		}

		.list_box ul li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50px;
			line-height: 50px;
			font-size: 14px;
			color: #666;
			border-bottom: 1px solid #eeeeee;
		}

		.list_box ul li label {
			width: 70px;
			white-space: nowrap;
		}

		.list_box ul li p {
			padding: 0;
			margin: 0;
		}

		.hiden_txt {
			display: flex;
			height: 50px;
			line-height: 50px;
			align-items: center;
			vertical-align: middle;
		}

		.hiden_txt input {
			margin: 0;
			padding: 4px;
			display: inline-block;
			vertical-align: middle;
			width: 180px;
			font-size: 14px;
		}

		.hiden_txt input:focus {
			outline: none;
			border: 1px solid #60C68B;
		}

		.list_box ul li .modify {
			color: #999;
			padding: 0;
			margin: 0;
		}

		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="app" class="app_b" v-cloak>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<span @click="submit_enter">提交</span>
		</header>
		<div class="container_box" >
			<div class="head_top">
				<div class="img_box">
					<img :src="default_userPicture" class="head_img" alt="头像">
				</div>
				<h2>点击左侧可更换头像</h2>
				<!-- 事件必须写在input 里面！ 如果不这样写拿不到file 文件。 -->
				<input type="file" name="default_userPicture" class="upload"  @change="setImage" ref="inputImg">				
			</div>
			
			<div class="list_box">
				<ul>
					<li>
						<label>用户昵称</label>
						<span class="hiden_txt" v-if="amend_1_status">
							<input type="text" name="userNick" v-model="userNick" @blur="Yz_name">
						</span>
						<p v-else>{{default_Nick}}</p>
						<span class="modify" @click="amend_1">修改</span>
					</li>
					<li>
						<label>真实姓名</label>
						<span class="hiden_txt" v-if="amend_2_status">
							<input type="text" name="userName" v-model="userName" @blur="Yz_truename">
						</span>
						<p v-else>{{default_Name}}</p>
						<span class="modify" @click="amend_2">修改</span>
					</li>
					<li>
						<label>身份证号码</label>
						<span class="hiden_txt" v-if="amend_3_status">
							<input type="text" name="userIDNumber" v-model="userIDNumber" @blur="Yz_userIDNumber">
						</span>
						<p v-else>{{default_userIDNumber}}</p>
						<span class="modify" @click="amend_3">修改</span>
					</li>
					<li>
						<label>出生日期</label>
						<span class="hiden_txt" v-if="amend_4_status">
							<input type="text" name="userBirthday" v-model="userBirthday" placeholder="格式为:1994-07-25" @click="Datapick" @blur="Yz_userBirthday">
						</span>
						<p v-else>{{default_userBirthday}}</p>
						<span class="modify" @click="amend_4">修改</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<script src="../../js/vue-resource.js"></script>
	<script src="../../js/base.js"></script>
	<script>
		mui.init({
		  pullRefresh : {
			container:".app_b",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			down : {
			  style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			  color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
			  height:'50px',//可选,默认50px.下拉刷新控件的高度,
			  range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			  offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
			  auto: false,//可选,默认false.首次加载自动上拉刷新一次
			  callback :function(){
				  window.location.reload();
			  } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			}
		  }
		});
		mui.plusReady(function () {
			//写这个目的是为了接受mui.open 传过来的对象参数!
			var current_window = plus.webview.currentWebview();		
			var vm = new Vue({
				el: "#app",
				data: {
					USEID: "",//打开这页面需要传值！一个参数！用户useid
					obj:{},// 这个对象是父页面传过来!参数值
					//默认值：
					default_Nick: "",//默认用户名称
					default_Name: "",//默认用户姓名
					default_userIDNumber: "",//默认身份证号
					default_userBirthday: "",//默认出生日期
					default_userPicture:"../../images/tx.jpg",//默认图片
					//输入框 里面绑定的值					
					userNick: "",//用户昵称
					userName: "",//用户姓名
					userIDNumber: "",//身份证号
					userBirthday: "",//出生日期
					userPicture: "",//用户头像
					//点击修改出现的输入框里面的输入框状态
					amend_1_status: false,// 用户昵称
					amend_2_status: false,// 用户昵称
					amend_3_status: false,// 用户昵称
					amend_4_status: false,// 用户昵称
					imgSize:2*1024*1024,//2M 自定义大小图片
					flag_submit:false,//是否允许提交
					flag_submit2:false,//是否允许提交
					flag_submit3:false,//是否允许提交
					flag_submit4:false,//是否允许提交
					Http_img:"",//后台传递图片
				},
				methods: {
					amend_1() {//点击第一个修改
						this.amend_1_status = !this.amend_1_status;	
						this.default_Nick = this.userNick;
					},
					amend_2() {//点击第二个修改
						this.amend_2_status = !this.amend_2_status;
						this.default_Name = this.userName;
					},
					amend_3() {//点击第三个修改
						this.amend_3_status = !this.amend_3_status;
						this.default_userIDNumber = this.userIDNumber;
					},
					amend_4() {//点击第四个修改
						this.amend_4_status = !this.amend_4_status;
						this.default_userBirthday = this.userBirthday;
					},
					setImage(e) {
						//选择文章封面
						// let value = this.$refs.inputImg.value;
						// if (this.valueRept == value) {
						// //解决选择重复图片不触发change事件
						// mui.toast("图片上传重复，请重新选择！");
						// return;
						// }
						//控制大小
						
						let file = e.target.files[0];
							// console.log(JSON.stringify(file)) 会显示base64
						if (file.size >= this.imgSize) {						
							mui.toast("图片太大");
							return
						}
						//base 转64
						const reader = new FileReader();
						reader.onload = event => {
							//转base64
							let result = event.target.result;
							// console.log(JSON.stringify(result)); 他是base64
							this.default_userPicture=result;
							//base64 转 HTTP
							var _this=this;
							HTTP.post(this, 'sysUserController/uploadSysUserPictureByApp', function(res) {
								// 传值值!打开页面	(暂时不传值)
								console.log(JSON.stringify(res.data));
								_this.Http_img=res.data;
							}, function(res) {
								mui.toast(res);
							}, {
								sourceType:"2",
								baseImage:_this.default_userPicture
							})
						
						};
						
						reader.readAsDataURL(file);
					},
					Yz_name(){//验证!用户昵称 只能为中文数字字母   /^[A-Za-z0-9\u4e00-\u9fa5]+$/gi;
					//用户名  中文2-8位/^[\u4E00-\u9FA5]{2,8}$/
						var gz =/^[A-Za-z0-9\u4e00-\u9fa5]+$/gi;
						if (!this.userNick) {
							alert("用户名不能为空");
						} else if (!gz.test(this.userNick)) {
							alert("请输入正确用户名");
						} else {
							this.flag_submit=true;//允许提交
						}
					},
					Yz_truename(){
						//真实姓名
						var gz = /^[\u4e00-\u9fa5]{2,4}$/i
						if (!this.userName) {
							alert("真实姓名不能为空");
						} else if (!gz.test(this.userName)) {
							alert("请输入正确真实姓名");
						} else {
							this.flag_submit2=true;//允许提交
						}
					},
					Yz_userIDNumber(){//身份证
						var gz = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
						if (!this.userIDNumber) {
							alert("身份证不能为空");
						} else if (!gz.test(this.userIDNumber)) {
							alert("请输入正确身份证");
						} else {
							this.flag_submit3=true;//允许提交
						}
					},
					Yz_userBirthday(){//生日
						var gz = /^((19[2-9]\d{1})|(20((0[0-9])|(1[0-8]))))\-((0?[1-9])|(1[0-2]))\-((0?[1-9])|([1-2][0-9])|30|31)$/;
						if (!this.userBirthday) {
							alert("生日不能为空");
						} else if (!gz.test(this.userBirthday)) {
							alert("请输入正确生日");
						} else {
							this.flag_submit4=true;//允许提交
						}
					},
					open_set(){//提交之后请求一遍接口!
						plus.nativeUI.showWaiting();
						HTTP.post(this, 'sysUserController/querySysUser', function(res) {
							// 传值值!打开页面	(暂时不传值)
							this.obj=res.data
													
						}, function(res) {
							mui.toast(res);
						}, {
							userId:this.USEID
						})						
					},
					getData(){
						// plus.nativeUI.showWaiting();
						let _this = this;
						HTTP.post(this, 'sysUserController/querySysUser', function(res) {
							_this.obj=res.data;
							// console.log(JSON.stringify(res.data));
							
							_this.default_Nick=_this.obj.userNick;//默认用户名称
							_this.default_Name=_this.obj.userName;//默认用户姓名
							_this.default_userIDNumber=_this.obj.userIDNumber;//默认身份证号
							_this.default_userBirthday=_this.obj.userBirthday;//默认生日
							_this.default_userPicture=_this.obj.userPicture;//默认照片--只是显示功能!
							_this.Http_img=_this.obj.userPicture;//如果 没有修改图片那么就把这个接受到的图片复制给我们需要传递的参数值!
							
							//如果有的话 我们先把他复制到真实的里面!
							_this.userNick=_this.default_Nick;
							_this.userName=_this.default_Name;
							_this.userIDNumber=_this.default_userIDNumber;
							_this.userBirthday=_this.default_userBirthday;
							
							//设置!用户名称和头像!传给本地存储!
							plus.storage.setItem('_userNick',_this.userNick);
							plus.storage.setItem('_userPicture',_this.default_userPicture);
							
						}, function(res) {
							mui.toast(res);
						}, {
							sourceType:"2",
							userId:this.USEID
						})	
					},
					submit_enter() {//提交
						//先执行验证规则
						this.Yz_name();
						this.Yz_truename();
						this.Yz_userIDNumber();
						this.Yz_userBirthday();
						if (this.userNick == "" || this.userName == "" || this.userIDNumber == "" || this.userBirthday == "") {
							mui.toast("修改内容不能为空");
							return;
						}
						else {
							if(this.flag_submit&&this.flag_submit2&&this.flag_submit3&&this.flag_submit4){
								//让修改的input 消失/
								this.amend_1_status = false;
								this.amend_2_status = false;
								this.amend_3_status = false;
								this.amend_4_status = false;
								
								plus.nativeUI.showWaiting();
								let _this = this;
								
								// console.log(JSON.stringify(this.default_userPicture))
								
								HTTP.post(this, 'sysUserController/modifyRealName', function (res) {
									plus.nativeUI.closeWaiting();
									mui.toast("发送成功");
									_this.getData();
									// 发送成功之后再次执行一遍设置的接口!
								}, function (res) {
									mui.toast(res);
								}, {
										userId: this.USEID,//用户Id
										userNick: this.userNick,//用户昵称
										userName: this.userName,//用户姓名
										userIDNumber: this.userIDNumber,//身份证号
										userBirthday: this.userBirthday,//生日
										userPicture:this.Http_img//头像
									})
							}
							else{
								mui.toast("修改不符合规定")
							}
					
						}
					
					},
					Datapick(){// 选择日期
						
						// 获取当前年月日
						var Setdate = new Date();
						var year = Setdate.getFullYear();
						var month = Setdate.getMonth();// 这里默认加上1的 但是底下的setFullYear是默认的原生的 0 代表1月!
						var strDate = Setdate.getDate();
						
						var styles = {};
						styles.title = "请选择日期："; // 显示标题
						styles.date = new Date(), styles.date.setFullYear(year,month,strDate);// 默认显示的日期
						styles.minDate = new Date(), styles.minDate.setFullYear(1945,0,1);// 设置最小可选日期为建国以前
						styles.maxDate = new Date(), styles.maxDate.setFullYear(year,month,strDate);// 设置最大可选日期为“2020-12-31” 当天
						
						var _this=this;
						plus.nativeUI.pickDate(function(e){
							var d=e.date;
							var resDate=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
							_this.userBirthday=resDate;
						}, function(e){
							console.log( "未选择日期："+e.message );
						}, styles);
						
					}
				},
				created() {
					//把用户的id 之前存放在里storage 里面了!
					this.USEID = plus.storage.getItem('_id');
					this.getData();
				}
			})

		})
	</script>
</body>

</html>